<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>单个活动</title>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta content="telephone=no" name="format-detection"/>
    <link th:href="@{/static/css/style.css}" rel="stylesheet"/>
</head>
<body>
<div class="single_wraper">
    <div class="header">
        <video style="width:100%;" id="video" controls src="http://win.web.rg03.sycdn.kuwo.cn/fa29e1890c58cc3dd7b099db4c9a6293/5744010e/resource/m1/4/9/1475630951.mp4"></video>
        <div class="toCalendar" id="toCalender">
            <img src="img/time.png" alt="">
            <span>2016-05-24 星期二</span>
            <i class="icon_right"></i>
        </div>
        <div class="toMap" id="toMap">
            <img src="img/address.png" alt="">
            <span>深圳市华侨城创意园</span>
            <i class="icon_right"></i>
        </div>
        <div class="dls">
            <dl>
                <dt class="days"><img src="img/days.png"></dt>
                <dd>1天</dd>
            </dl>
            <dl>
                <dt class="persens"><img src="img/persens.png"></dt>
                <dd>1-20人</dd>
            </dl>
            <dl>
                <dt class="safe"><img src="img/safe.png"></dt>
                <dd>意外险</dd>
            </dl>
        </div>
    </div>
    <div class="body" id="body">
        <h1 class="title"><i></i>古村凝云剧情</h1>
        <p class="explain">这是二零零八年的夏天。接连半个多月的阴雨天让整个县城都笼罩在阴郁凄冷的氛围里。这是二零零八年的夏天。接连半个多月的阴雨天让整个县城都笼罩在阴郁凄冷的氛围里。</p>
        <h1 class="title"><i></i>活动亮点</h1>
        <p class="explain">自然，自由，随风，随性...</p>
        <img src="img/banner1.jpg">
        <h1 class="title"><i></i>体验描述</h1>
        <p class="explain">排云之上，到天际遨游，完成一次人生的突破。</p>
        <img src="img/banner.jpg">
        <div class="lookall">查看全部<i></i></div>
    </div>
    <div class="attention">
        <h1 class="attentionTitle">注意事项</h1>
        <p class="explain">
            1、本线路并非常规旅游线路，一路上可能发生不可预计的情况较多，希望大家有良好的心态对待和处理，任何时候不得抱怨和发生争执，时刻要有团队协作精神；<br>
            2、参加者须身体健康，自带个人常用药品；<br>
            3、必须有环保意识，不得乱扔垃圾；
        </p>
    </div>
    <div class="leaders">
        <h1 class="title"><i></i>执行领队</h1>
        <div class="leader">

        </div>
    </div>
    <div class="headPortraits">
        <div class="pics">
            <img src="img/pic1.png">
            <img src="img/pic2.png">
            <img src="img/pic3.png">
            <img src="img/pic4.png">
            <img src="img/pic5.png">
            <img src="img/pic6.png">
            <img src="img/pic7.png">
        </div>
        <div class="personNum">20人喜欢</div>
    </div>
    <div class="comments">
        <h1 class="title"><i></i>评论</h1>
        <div class="comment">
            <dl>
                <dt><img src="img/stx.jpg"></dt>
                <dd>
                    <p>Sailing<span class="label">lv2</span><span class="label">达人</span><span class="right">3分钟前</span></p>
                    <p>美女 90后</p>
                </dd>
            </dl>
            <div class="stars"></div>
            <p class="content">这活动挺不错的，还可以认识很多帅哥美女，全程玩的很开心，领队很有责任心。</p>
        </div>
        <div class="comment">
            <dl>
                <dt><img src="img/stx1.jpg"></dt>
                <dd>
                    <p>Sailing<span class="label">lv2</span><span class="label">达人</span><span class="right">3分钟前</span></p>
                    <p>美女 90后</p>
                </dd>
            </dl>
            <div class="stars"></div>
            <p class="content">这活动挺不错的，还可以认识很多帅哥美女，全程玩的很开心，领队很有责任心。</p>
        </div>
        <div class="lookmore">查看更多<i></i></div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/js/zepto.min.js}"></script>
<script>
    $(function(){
        for (var i = 0; i < $(".explain").length; i++) {
            var m = $(".explain").eq(i);
            if (m.text().length > 65) {
                m.attr("content", m.text());
                m.html(m.text().substr(0, 65) + "...<a name=\"zhankai\" href=\"javascript:;\">详情</a>");
            }
        }
        $("a[name=zhankai]").live("tap", function () {
            $(this).parent().html($(this).parent().attr("content") + "<a name=\"yinchang\" href=\"javascript:;\">隐藏</a>");
        });
        $("a[name=yinchang]").live("tap", function () {
            $(this).parent().html($(this).parent().attr("content").substr(0, 65) + "...<a name=\"zhankai\" href=\"javascript:;\">详情</a>");
        });

        $('.lookall').on('tap',function(){
            //alert(1)
            var obj = document.getElementById('body').style;
            console.log(obj.height);
            if(obj.height==""){
                obj.height=500+"px";
                obj.overflow="hidden";
            }else{
                obj.height="";
                obj.overflow="";
            }
        });
        $('.lookall').trigger('tap');
        $('#toCalender').on('tap',function(){
            alert("日历")
        });
        $('#toMap').on('tap',function(){
            alert("地图")
        });
        $('#video').on('tap',function(){
            alert("视频")
        });
        $('.leader dl').on('tap',function(){
            alert($(this).index())
        });
        $('.lookmore').on('tap',function(){
            alert("查看更多评论")
        })
    })

</script>
</html>